<template>

  <el-card>
    <div slot="header" class="clearfix">
      <span>已结束停止</span>
    </div>

    <el-table
      :data="planComplete"
      max-height="700px"
      height="700px"
      style="width: 100%">

      <el-table-column
        prop="name"
        label="计划名称"
      >
      </el-table-column>

      <el-table-column
        prop="details"
        label="详情"
      >
      </el-table-column>

      <el-table-column
        prop="type"
        label="计划类型"
      >
        <template slot-scope="scope">
          <el-tag type="warning" size="mini" v-if="scope.row.type === 10">固定任务</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.type === 11">固定任务(精确到秒)</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.type === 20">循环任务(年)</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.type === 21">循环任务(月)</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.type === 22">循环任务(天)</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.type === 23">循循环任务(小时)</el-tag>
          <el-tag type="info" size="mini" v-else >-</el-tag>
        </template>
      </el-table-column>


      <el-table-column
        prop="importance"
        label="重要性"
      >
        <template slot-scope="scope">
          <el-tag type="danger" size="mini" v-if="scope.row.importance === 0">核心</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.importance === 1">重要紧急</el-tag>
          <el-tag size="mini" v-else-if="scope.row.importance === 2">不重要但紧急</el-tag>
          <el-tag size="mini" v-else-if="scope.row.importance === 3">重要但不紧急</el-tag>
          <el-tag type="info" size="mini" v-else >不重要不紧急</el-tag>
        </template>
      </el-table-column>

      <!--<el-table-column-->
      <!--  prop="startTime"-->
      <!--  label="开始时间"-->
      <!--&gt;-->
      <!--</el-table-column>-->

      <!--<el-table-column-->
      <!--  prop="executeLastTime"-->
      <!--  label="最近一次执行"-->
      <!--&gt;-->
      <!--</el-table-column>-->

      <el-table-column
        prop="classify"
        label="分类"
      >
        <template slot-scope="scope">
          <el-tag type="danger" size="mini" v-if="scope.row.classify === 1">个人</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.classify === 2">家庭</el-tag>
          <el-tag size="mini" v-else-if="scope.row.classify === 3">工作</el-tag>
          <el-tag type="info" size="mini" v-else >-</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="cycle"
        label="周期"
      >
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.type === 10">{{scope.row.cycle}} / 次</el-tag>
          <el-tag size="mini" v-else-if="scope.row.type === 11">{{scope.row.cycle}} / 次</el-tag>
          <el-tag size="mini" v-else-if="scope.row.type === 20">{{scope.row.cycle}} 年 / 次</el-tag>
          <el-tag size="mini" v-else-if="scope.row.type === 21">{{scope.row.cycle}} 月 / 次</el-tag>
          <el-tag size="mini" v-else-if="scope.row.type === 22">{{scope.row.cycle}} 天 / 次</el-tag>
          <el-tag size="mini" v-else-if="scope.row.type === 23">{{scope.row.cycle}} 小时 / 次</el-tag>
          <el-tag size="mini" v-else >-</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="advance"
        label="提前提醒"
      >
        <template slot-scope="scope">
          <span>{{scope.row.advance}} / 天</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="finish"
        label="是否完成"
      >
        <template slot-scope="scope">
          <el-tag type="info" size="mini" v-if="scope.row.finish === 10">未完成</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.finish === 11">未完成逾期</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.finish === 12">进行中</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.finish === 20">任务完成</el-tag>
          <el-tag  size="mini" v-else-if="scope.row.finish === 21">已完成逾期</el-tag>
          <el-tag type="danger" size="mini" v-else >任务停止</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button @click="toPlanDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
          <el-button @click="toOpenHistory(scope.row)" type="text" size="small"><i class="el-icon-view"></i>执行记录</el-button>
          <el-button @click="delPlanByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除计划</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--执行记录-->
    <PlanHistory ref="PlanHistoryRef"/>
    <PlanDetailed ref="PlanDetailedRef"/>
  </el-card>

</template>

<script>

  import http from '@/utils/http'
  import PlanHistory from './PlanHistory'
  import PlanDetailed from './PlanDetailed.vue'

  export default {
    name: "PlanCompletedList",
    components: {
      PlanHistory,
      PlanDetailed,
    },
    data(){
      return {
        // 逾期未完成
        planComplete: [],
      }
    },
    methods: {
      /**
       * 打开历史记录信息
       * @param row 当前行数据
       */
      toOpenHistory(row){
        this.$refs.PlanHistoryRef.openPlanHistoryPage(row.id)
      },
      /**
       * 打开详情页面
       * @param row
       */
      toPlanDetailed(row){
        this.$refs.PlanDetailedRef.openPlanDetailedPage(row)
      },
      /**
       * 删除前的提示
       * @param row 当前行数据
       */
      delPlanByIdTips(row){
        this.$confirm('是否删除该计划?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPlanById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据计划ID删除计划以及执行历史记录
       * @param row 当前行数据
       */
      delPlanById(row){
        http.post("/plan/delPlanById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getCompleteTask()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 找到已完成和终止的任务
       */
      getCompleteTask(){
        http.get("/plan/getCompleteTask", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.planComplete = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getCompleteTask()
    }
  }
</script>

<style scoped>

</style>
